<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="powersi" uri="http://www.powersi.com.cn/tags"%>
<powersi:html>
<head>
<powersi:head title="jscharts 实例" />
<style type="text/css">
table.its tr.audit {
	color: #0069a2;
}
</style>
<script type="text/javascript" src="../../../resource/js/JScharts/jscharts.js"></script>
</head>
<body >
	<powersi:form namespace="/report" action="DeviceReport!GetTest.action" >
		<powersi:groupbox title="查询条件">
			<powersi:editorlayout cols="4">
				<tr>
						<powersi:textfield label="查询条件"></powersi:textfield>
						<td>
							<powersi:button id="btCalc"  value="查  询"  onclick="queryData()"  ></powersi:button>
						</td>
				</tr>
			</powersi:editorlayout>
		</powersi:groupbox>

		<powersi:groupbox title="查询结果">
			<div id="graph">Loading graph...</div>
		</powersi:groupbox>

	</powersi:form>
	<powersi:errors />
	<script type="text/javascript">
	function queryData() {
		postJSON("${rootPath}/report/DeviceReport!getDevicePerformance.action" , dealSuccess);
	}

	function dealSuccess(json) {
		if(!checkJSONResult(json)){
		    return;
	    }

	    var myData = json.data.data;
	    redraw(myData);
	}
	function redraw (myData) {


			var myData1 = new Array(['美国', 69.5], ['加拿大', 2.8], ['日本 & 东亚', 5.6], ['澳洲', 2.8], ['欧盟', 14.6], ['欧洲其他国家', 2.7], ['其他', 1.9]);
			var colors = ['#FA5E1F', '#FDCB3F', '#71D743', '#D23333', '#BAE73F', '#AB7B55', '#B381C9'];
			var myChart = new JSChart('graph', 'bar');
			myChart.setDataArray(myData);
			


			 //myChart.patchMbString();

			//myChart.colorizeBars(colors);
			myChart.setTitle('这是标题~');
			myChart.setTitleColor('#8E8E8E');
			myChart.setAxisNameX('地区');
			myChart.setAxisNameY('%');
			myChart.setAxisColor('#c6c6c6');
			myChart.setAxisWidth(1);
			myChart.setAxisNameColor('#9a9a9a');
			myChart.setAxisValuesColor('#939393');
			myChart.setAxisPaddingTop(60);
			myChart.setAxisPaddingLeft(50);
			myChart.setAxisPaddingBottom(60);
			myChart.setTextPaddingBottom(20);
			myChart.setTextPaddingLeft(15);
			myChart.setTitleFontSize(11);
			myChart.setAxisNameFontSize(12);
			myChart.setAxisValuesFontSize(9);
			myChart.setBarValuesFontSize(9);
			myChart.setBarBorderWidth(0);
			myChart.setBarSpacingRatio(50);
			//myChart.setBarValuesColor(colors);
			myChart.setGrid(false);
			myChart.setSize(616, 321);
			//myChart.setBackgroundImage('chart_bg.jpg');  
			
			myChart.draw();

			//myChart.patchMbString();
			
	}
</script>
</body>
</powersi:html>